<template>
  <div>
    <div class="operation">
      <el-form :inline="true" :model="form" class="formList">
        <el-form-item label="账期">
          <el-date-picker
            v-model="form.acctMonth"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList()"
            >查询</el-button
          >
          <el-button size="small" type="orange" @click="handleExport()"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        border
        stripe
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        :span-method="arraySpanMethod"
        height="78vh"
        ref="table"
      >
        <el-table-column
          v-for="(it, i) in columns"
          :key="i"
          :prop="it.code"
          :label="it.name"
          min-width="110"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
export default {
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        acctMonth: "",
      },
      tableLoading: false,
      tableData: [],
      columns: [],
      spanArr: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      this.form.acctMonth = this.moment().subtract(1, "months").format("YYYYMM");
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      $budgetAPI.getMainMHDataList({ ...this.form }, (res) => {
        console.log(res);
        const { head, data } = res.content;
        this.tableData = data;
        this.columns = head;
        this.tableLoading = false;
        this.spanArr = mergeSpan(this.tableData, head.slice(0, 2).map(it => it.code));
      });
    },
    handleExport(){
      const fileName = this.form.acctMonth + "码号收入全面打开";
      downLoadExcelParams(
        "/mainincomeanalyze/exportBatchMainMHData",
        { ...this.form, reportId: 'P200', },
        fileName
      );
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableData.length > 0) {
        if (
          columnIndex == 0 || columnIndex == 1
        ) {
          return this.spanArr.length && this.spanArr[rowIndex][columnIndex];
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tableBox {
  margin-top: 10px;
}
</style>